<template>
  <div>
    <x-header :right-options="{showMore: false}"  :left-options="{backText: ''}" @on-click-more="showMenus = true">修改取款密码</x-header>
    <!-- <div style="height:44px;"> -->
      <!-- <sticky
        scroll-box="vux_view_box_body"
        ref="sticky"
        :offset="46"
        :check-sticky-support="false"
        :disabled="disabled">
        <tab :line-width="1">
          <tab-item selected>转入</tab-item>
          <tab-item>转出</tab-item>
        </tab>
      </sticky> -->
    <!-- </div> -->
    <div class="zhuanru" v-if="zhuanru">
      <div class="groupInput">
          <x-input title="原密码" label-width="2.05rem" placeholder="请输入原K盾密码" ></x-input>
          <x-input title="新密码" label-width="2.05rem" placeholder="请输入密码（6-12位,字母、数字组合）" ></x-input>
          <x-input title="确认新密码" label-width="2.05rem" placeholder="请再次输入新密码" ></x-input>
      </div>
      <div class="surebtn">
        <x-button class="subBtn"  @click.native="toEAccountmessageY" type="primary" action-type="button">确定</x-button>
      </div>
      <p class="title">温馨提示</p>
          <p class="text">密码设置长度为8-12位，必须包含字母，且同时包含数字、字母、符号中任意两种以上字符。</p>
    </div>
    <div class="zhuanchu" v-if="zhuanchu">
      <!-- <div class="groupInput">
        <group title="">
          <cell title="转入账户" :value="value1_2"></cell>
          <cell title="选择银行卡" value="" is-link></cell>
          <x-input title="提现金额" placeholder="请输入提现金额" v-model="money" @on-blur="regText('金额格式错误', 'money', money, 2)" text-align="right" label-width="1.8rem"></x-input>
        </group>
      </div> -->
      <div class="surebtn">
        <x-button class="subBtn"  @click.native="toEAccountmessageY" type="primary" action-type="button">{{buttonTxt1}}</x-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Tab, TabItem, Sticky } from 'vux'
export default {
  components: {
    Tab,
    TabItem,
    Sticky
  },
  data () {
    return {
      eaccountData: {
        IDNo: '',
        mobile: '',
        smsCode: ''
      },
      zhuanru: true,
      zhuanchu: false,
      value1_2: '3213****3213',
      buttonTxt: '充值',
      buttonTxt1: '提现',
      maskValue: '123456',
      deal: 0 // 控制勾选框
    }
  },
  methods: {
    dealClick: function () { // 勾选框显示事件
      let n = this.deal
      if (n === 1) {
        this.deal = 0
      } else {
        this.deal = 1
      }
    },
    toEAccountmessageY: function () {
      this.$router.push({name: 'EAccountmessageY', query: {'bindCard': '6217298009765555', 'bankName': '2001', 'createDate': '2018-08-02', 'acctNo': '4225876765456787987', 'acctType': 'II类户'}})
    },
    getData () {
      let lvm = this
      window.WebViewJavascriptBridge.callHandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'H5EAccountOpenQuery', 'user_Data': {'IDNo': '111111', 'mobile': '18234444444', 'smsCode': '333311'}}
        }),
        function (response) {
          alert('返回' + JSON.stringify(response))
          // this.eaccountData = response.data[0]
          // response是响应数据
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            lvm.eaccountData = response.data.data[0]
          } else {
            console.log('fail')
          }
        })
    }
  },
  created () {
    this.getData()
  }
}
</script>
<style>
@import '../../assets/css/reset.css';
div.vux-header {
  background-color: #fff;
}
div.vux-header .vux-header-left a {
  color: #333;
}
div.vux-header .vux-header-left .left-arrow:before {
  border: 1px solid #333;
  border-width: 1px 0 0 1px;
}
div.vux-header .vux-header-right a {
  color: #333;
}
div.vux-header .vux-header-title {
  color: #333;
}
button.subBtn {
  background-color: #ec1b30;
}
button.weui-btn_primary:not(.weui-btn_disabled):active {
  background: rgba(236,27,48,.6);
}
.mobileyz.weui-btn_default {
  color:#3333FF;
  font-size:0.28rem;
  border-top:0;
}
.space-btn {
    padding: 5px 0;
    margin: 10px;
    text-align: center;
    border: 1px red solid;
  }

  .space {
    padding: 30px 0;
    margin: 10px;
    text-align: center;
    border: 1px green solid;
  }
</style>

<style lang="less" scoped>

.deal{
    margin-top: 0.48rem;
    margin-bottom: 0.45rem;
    padding-left: 0.3rem;
    overflow: hidden;
    .select{
        float: left;
        width: 0.28rem;
        height: 0.28rem;
        border: 1px solid #bfbfbf;
        margin-right:0.21rem;
        vertical-align: middle;
        &>img{
            width: 100%;
            height: auto;
        }
    }
    &>p{
        float: left;
        width:6.43rem;
        font-size:0.22rem;
        line-height: 0.35rem;
        color: #ccc;
        .dealCheck{
            color: #3333ff;
            text-decoration: none;
            font-size:0.22rem;
        }
    }
    &>i{
        float: left;
        margin-left: 0px;
        margin-right: 0.15rem;
        &>img{
            vertical-align: top;
            width: 100%;
            height: auto;
        }
    }
}
.groupInput {
  background: #fff;
  margin-top:.2rem;
}
.surebtn {
  width:6.9rem;
  margin-left:.3rem;
  margin-top:.6rem;
}
p.title {
    color: #999;
    margin-left: 0.3rem;
    margin-right: 0.29rem;
    margin-top: 0.29rem;
  }
p.text {
    color: #999;
    margin-left: 0.29rem;
    margin-right: 0.29rem;
    margin-top: 0.29rem;
  }
</style>
